<template>
  <div class="app" id="bu21">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>我的推广</h3>
              <el-button @click="dialogVisible = true" type="danger" style="margin-right:10px">购买推广</el-button>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待使用" name="first">
                <div class="mouen">
                  <el-table :data="tableData" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto">
                    <el-table-column fixed prop="buyDate" label="购买时间"></el-table-column>
                    <el-table-column prop="types" label="推广类型"></el-table-column>
                    <el-table-column prop="dates" width="200" label="可使用用时间"></el-table-column>
                    <el-table-column prop="duration" label="可使用时长"></el-table-column>
                    <el-table-column prop="province" width="180" label="推广位置"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="employ(scope.$index, scope.row)"
                        >立即使用</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="待上线" name="second">
                <div class="mouen">
                  <el-table :data="tableData" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto">
                    <el-table-column fixed prop="buyDate" label="购买时间"></el-table-column>
                    <el-table-column prop="types" label="推广类型"></el-table-column>
                    <el-table-column prop="dates" width="200" label="可使用用时间"></el-table-column>
                    <el-table-column prop="duration" label="可使用时长"></el-table-column>
                    <el-table-column prop="province" width="180" label="推广位置"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="正在进行" name="thirdqq">
                <div class="mouen">
                  <el-table :data="tableData" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto">
                    <el-table-column fixed prop="buyDate" label="购买时间"></el-table-column>
                    <el-table-column prop="types" label="推广类型"></el-table-column>
                    <el-table-column prop="dates" width="200" label="可使用用时间"></el-table-column>
                    <el-table-column prop="duration" label="可使用时长"></el-table-column>
                    <el-table-column prop="province" width="180" label="推广位置"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="全部推广" name="thirdaa">
                <div class="mouen">
                  <el-table :data="tableData" :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}" style="width: 873px;margin:15px auto">
                    <el-table-column fixed prop="buyDate" label="购买时间"></el-table-column>
                    <el-table-column prop="types" label="推广类型"></el-table-column>
                    <el-table-column prop="dates" width="200" label="可使用用时间"></el-table-column>
                    <el-table-column prop="duration" label="可使用时长"></el-table-column>
                    <el-table-column prop="province" width="180" label="推广位置"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="employ(scope.$index, scope.row)"
                        >立即使用</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog :visible.sync="dialogVisibleUnused" width="650px" :before-close="handleClose">
      <div class="lheds">关联活动</div>
      <div id="weiyi">
        <div style="line-height: 28px;">搜索</div>
        <el-input
          style="width:200px;"
          size="mini"
          placeholder="活动ID/产品名称/关键字"
          v-model="inputs">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button size="mini" type="danger" round>查询</el-button>
      </div>
      <div id="b21">
        <div class="b21_heds">已审核通过活动列表:</div>
        <!-- 循环第一个 给判断就行了 -->
        <div class="b21_boxs">
          <div style="width:40px;">
            <el-checkbox v-model="bol" style="line-height: 124px;margin-left: 13px;"></el-checkbox>
          </div>
          <div>
            <img src="@/assets/img/aa.png" alt />
          </div>
          <div class="b21_boxs_text">
            <div class="b21_boxs_labs">
              <div>免费体验</div>
              <h5 style="line-height: 25px;">简柏格真皮百搭款女包</h5>
            </div>
            <div>
              活动时间: {{times}}
            </div>
            <div>免费体验数量: {{nums}}份</div>
            <div>
              市场参考价: {{monetary}}元
            </div>
            <div>
              申请时间: {{datas}}
            </div>
          </div>
          <div style="flex:1;">
            <p style="text-align:center">正在进行中</p>
            <el-button style="display:block;margin:5px auto;" round size="mini">查看详情</el-button> 
          </div>
        </div>

        <!-- 第二个 -->
        <div class="b21_boxs">
          <div style="width:40px;">
            <el-checkbox v-model="bol1" style="line-height: 124px;margin-left: 13px;"></el-checkbox>
          </div>
          <div>
            <img src="@/assets/img/aa.png" alt />
          </div>
          <div class="b21_boxs_text">
            <div class="b21_boxs_labs">
              <div style="background-color:rgb(142,131,195)">价格竞猜</div>
              <h5 style="line-height: 25px;">简柏格真皮百搭款女包</h5>
            </div>
            <div>
              活动时间: {{times}}
            </div>
            <div>奖品数量: {{nums}}份</div>
            <div>
              竞猜方式: 价格区间竞猜 199元-299元
            </div>
            <div>
              申请时间: {{datas}}
            </div>
          </div>
          <div style="flex:1;">
            <p style="text-align:center">正在进行中</p>
            <el-button style="display:block;margin:5px auto;" round size="mini">查看详情</el-button> 
          </div>
        </div>
      </div>
      <div><el-button @click="submits()" type="danger" size="small" style="display:block;margin:0 auto;">确定提交</el-button></div>
      <div style="height:15px"></div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="lheds">购买推广</div>
      <div style="width:80%;margin:0 auto">
        <el-form label-width="100px">
          <el-form-item label="推广类型:">
            <el-checkbox label="展示推广" v-model="types"></el-checkbox>
            <el-checkbox label="排名推广" v-model="types1"></el-checkbox>
          </el-form-item>
          <el-form-item label="推广时间:">
            <el-select v-model="beijing" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推广位置:">
            <el-select v-model="beijing" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推广位置:">
            <div>1000元</div>
          </el-form-item>
          <el-button type="danger" style="display:block;margin:0 auto">确定购买</el-button>
          <p style="text-align: center;">(请确认无误后再点击购买，购买后不可退)</p>
        </el-form>
      </div>
      <div style="height:15px"></div>
    </el-dialog>
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      shanghai: "",
      beijing: "",
      types: "",
      types1: "",
      dialogVisible: false,
      dialogVisibleUnused:false,
      activeName: "first",
      inputs:"",
      tableData: [
        {
          buyDate: "2016-05-02",
          types: "展示推广",
          dates: "2016-05-02---2019-05-02",
          duration: "3天",
          province: "产品详情页右侧热推3",
          price: "6000"
        }
      ],
      // 关联活动弹窗里的数据
      times:"2019-11-27 - 2019-12-03",
      nums:6,
      monetary:399,
      datas:2019-11-25,
      bol:false,
      bol1:false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleClick(row) {
      console.log(row);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //使用未使用的推广
    employ(){
      this.dialogVisibleUnused=true
    },
    // 提交关联活动
    submits(){
      if(this.bol==false&&this.bol1==false){
        this.$message({
          message: '请选择要关联的活动',
          type: 'warning'
        });
      }else{
        this.$message({
          message: '关联成功',
          type: 'success'
        });
         this.dialogVisibleUnused=false
      }
    }
  }
};
</script>
<style>
#bu21 /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
#bu21 .conres /deep/ .el-tabs__nav {
  margin-left: 260px;
}
#bu21 .conres /deep/ .el-tabs__item.is-active {
  color: #f06048;
}
#bu21 .conres /deep/ .el-tabs__active-bar {
  color: #f06048;
}
#bu21 .conres /deep/ .el-tabs__item:hover {
  color: #f06048;
}
#bu21 .conres /deep/ .el-tabs__active-bar {
  background-color: #f06048;
}
#bu21 .conres /deep/ .el-tabs--top {
  margin-top: -18px;
}
#bu21 .back {
  background-color: #f06048;
}
#bu21 .pxes {
  height: 15px;
}
#bu21 .back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
#bu21 .listneo {
  width: 1161px;
  height: 1227px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
#bu21 .conres {
  height: 1227px;
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
#bu21 .conres .ra {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #313131;
  margin-top: 15px;
  margin-bottom: 20px;
}
#bu21 .conres h4 {
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  font-weight: 550;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #313131;
  text-align: center;
}
#bu21 .conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
}
#bu21 .el-dialog__header {
  padding: 0px !important;
}
#bu21 .el-dialog__body {
  padding: 0px !important;
}
#bu21 .lheds {
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
#bu21 .feny {
  display: flex;
  line-height: 40px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
#weiyi{
  width: 50%;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
}
#weiyi .el-input--mini .el-input__inner{
  border-radius: 30px;
}
#b21{
  width: 640px;
  margin: 15px 5px;
  border: solid 1px rgb(194,194,194);
}
#bu21 .b21_heds{
  background-color: rgb(220,220,220);
  font-size: 18px;
  text-indent: 15px;
}
#bu21 .b21_boxs{
  display: flex;
  margin: 5px 0px;
  border-bottom: solid 1px rgb(230, 230, 230);
}
#b21 .b21_boxs img{
  width: 120px;
  height: 120px;
}
#b21 .b21_boxs_text{
  width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 7px;
}
#b21 .b21_boxs_labs{
  display: flex;
}
#b21 .b21_boxs_labs div:nth-child(1){
  color: white;
  background-color: rgb(125,196,105);
  padding: 3px 10px;
  border-radius: 30px;
  margin-right: 5px;
}

</style>